<template>
  <div class="page-h5warp">
    <pk-scroll :loading="loading" :isEnd="isEnd" @scrolltolower="scrolltolower">
      <div class="page-h5warp-content pt-24">
        <div class="page-h5warp-itembox">
          <div class="page-h5warp-item" v-for="(item,index) in list" :key="index">
            <pk-good :data="item" @onCall="onCall(item)"></pk-good>
          </div> 
        </div>
      </div> 
    </pk-scroll>
    <!-- <pk-qrcode :data="curData" v-if="linkShow" @onClose="linkShow=false"></pk-qrcode> -->
  </div>
</template>

<script setup>
  import { ref, onMounted  } from 'vue'
  import { agentGetList, generateChatLink } from '@/api/api'
  import pkGood from '@/components/pkui/pkgood/pkgood.vue'
  import pkScroll from '@/components/pkui/pkscroll/pkscroll.vue'
  import { useSideStore } from '@/store/state'
  import { getToken, setKeyItem} from '@/utils/auth'
  const counterStore = useSideStore()
  const loading = ref(false)
  const isEnd = ref(false)
  const list = ref([])
  const page = ref(1)

  const getList = () => {
    if (isEnd.value) {
      return
    }
    loading.value = true
    agentGetList({
      page: page.value
    }).then(res => {
      setTimeout(() => {
        loading.value = false
        if (res.data.list.length == 0) {
          isEnd.value = true
        } 
        if(res.data.list.length > 0){
          list.value = list.value.concat(res.data.list)
        } 
      }, 500)
    }).catch(() => {
      loading.value = false
    })
  } 

  const onCall = (e) => {
    if (!getToken()) {
      counterStore.SETLOGINSHOW(true)
      return
    } 
    generateChatLink({
      agent_id: e.agent_id,
      is_public: 1
    }).then(res => {
      window.open(res.data, "_blank")
    })
  }

  const scrolltolower = () => {
    page.value = page.value + 1
    getList()
  }

  onMounted(() => {
    list.value = [] 
    getList() 
  })
</script>

<style lang="scss" scoped>
.page-h5warp{
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  &-content{
  //  padding-bottom: 50px;
  }
  &-itembox{
    margin: 0 16px
  }
  &-item{
    margin-bottom: 12px
  }
}

</style>